import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// 配置eslint检测的文件
import eslintPlugin from 'vite-plugin-eslint'
// vue setup组件定义name
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// 引入svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'


const resolve = url => path.resolve(__dirname, url)


// https://vitejs.dev/config/
export default defineConfig(({mode}) => {

  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')

  return {
    base: './',
    server: {
      host: '0.0.0.0',
      port: 9999, // 启动端口
      https: false, // 配置https
      open: true, // 开发服务器启动时，自动在浏览器中打开应用程序
      cors: true,
      // 本地服务器代理
      proxy: {
        // http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
        '/api': {
          target: env.VITE_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
        // 只处理上传接口
        '/upload': {
          target: env.VITE_BASE_UPLOAD_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/upload/, '')
        }
      }
    },
    plugins: [
      vue(),
      eslintPlugin({include: ['src/**/*.js', 'src/**/*.jsx', 'src/**/*.vue', 'src/*.js', 'src/*.jsx', 'src/*.vue']}),
      VueSetupExtend(),
      createSvgIconsPlugin({
        // 指定需要缓存的svg图标文件夹，即需要识别的svg都应该放在这个文件夹下
        // iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
        // 或
        iconDirs: [resolve('src/assets/svgs')],
        // 指定symbolId格式（这里的配置与引入svg组件的name配置项写法有关）
        symbolId: 'icon-[name]'
      })
    ],
    // 配置路径别名
    resolve: {
      alias: {
        '@': resolve('src'),
        '@/*': resolve('src/*')
      },
      extensions: ['.js', '.jsx', '.json', '.vue']
    },
    // 配置css的loader
    css: {
      preprocessorOptions: {
        scss: {
          // 全局引入css变量
          additionalData:  '@import "@/styles/mixin.less";',
          javascriptEnabled: true
        }
      }
    },
    // 打包配置
    build: {
      outDir: 'card-store',
      rollupOptions: {
        output: {
          entryFileNames: (chunk) => {
            if (chunk.name.includes('css-runtime')) {
              return 'css/runtime/[name].[hash].js'
            }
            if (chunk.name.includes('css')) {
              return 'css/[name].[hash].js'
            }
            if (chunk.name.includes('js-runtime')) {
              return 'js/runtime/[name].[hash].js'
            }
            return 'js/[name].[hash].js'
          },
          chunkFileNames: 'js/[name].[hash].js',
          assetFileNames: '[ext]/[name].[hash].[ext]'
        }
      }
    }
  }
})
